<template>
    <div class='hgTableCon'>
        <div class='hgTableHead'>
            微应用调度
        </div>
        <div class='hgTable'>
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                align="center"
                label="序号"
                type="index"
                width="60">
                </el-table-column>
                <el-table-column
                prop="name"
                label="微应用名称"
                width="100">
                </el-table-column>
                <el-table-column
                align="center"
                prop="status"
                label="运行状态"
                width="80">
                    <template slot-scope="scope">
                        <div  v-bind:class="{'activeRed':((scope.row.status==='停用'))}">{{scope.row.status}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                align="right"
                prop="count"
                label="正在访问人数">
                </el-table-column>
                <el-table-column
                prop="supplier"
                label="提供者">
                </el-table-column>
                <el-table-column
                prop="tag"
                label="操作"
                width="80">
                    <template slot-scope="scope">
                        <div class="tagStyle" v-bind:class="{'activeBlue':((scope.row.tag==='启用'))}">{{scope.row.tag}}</div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>


<script>
export default {
    name: 'HgTable',
    data () {
        return {
            tableData: [{
                name: '投票管理',
                status: '运行中',
                count:'20',
                supplier:'机关事务管理局',
                tag:'停用'

            }, {
                name: '智能客服',
                status: '停用',
                count:'0',
                supplier:'财务部',
                tag:'启用'
            }, {
                name: '我的收藏',
                status: '运行中',
                count:'10',
                supplier:'机关事务管理局',
                tag:'停用'
            }, {
                name: '搜索管理',
                status: '运行中',
                count:'100',
                supplier:'预算处',
                tag:'停用'
            }]
        };
    },
    methods: {

    }
};
</script>

<style lang="scss" scoped>
.hgTableCon{
     .el-table thead{
        color:#333 !important;
        font-weight:400 !important;
    }
    
    .hgTableHead{
        height:40px;
        line-height:40px;
        border-bottom:2px solid #EBEEF5;
        padding-left:20px;
    }
    .hgTable{
        padding:10px;
    }
    .activeRed{color:red}
    .activeBlue{
        color:#fff !important;
        background:#108ee9 !important;
    }
    .tagStyle{
        border:1px solid #eee;
        border-radius:4px;
        width:50px;
        height:30px;
        text-align:center;
        line-height:30px;
        color:#666;
        background:#fff;
    }
}

</style>